<template>
    <el-container>
        <el-header class="admin-header">
            <el-col :span="4">
                <img
                        src="https://element-plus.org/images/element-plus-logo.svg"
                        alt="Element logo" 
                    />
            </el-col>
            <el-col :span="17">
                <!-- 后台管理系统 -->
            </el-col>
            <el-col :span="3">
                <el-button type="info" round @click="logout">登出</el-button>
            </el-col>
        </el-header>
        <el-container>
            <el-aside width="200px" class="admin-menu">
                <AsideMenu></AsideMenu>
            </el-aside>
            <el-main>
                <el-scrollbar class="admin-main">
                    <router-view></router-view>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import AsideMenu from './Menu.vue';
export default {
    components: {
        AsideMenu
    },
    setup () {
        

        return {}
    }
}
</script>

<style lang="scss" scoped>
.admin-header {
    background-color: #545c64;
    padding: 0;
    margin: 0px;
    max-height: 55px;
    // border-bottom: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    

    div:nth-child(1) {
        height: 55px;
        display: flex;
        justify-content: center;/* 水平居中 */
        align-items: center;/* 垂直居中 */
        img {
            width: 130px;
            height: 35px;
        }
        // cursor: pointer;
        // text-align: left;
        // padding-left: 8px;
        // .el-icon {
        //     font-size: 24px;
        // }
        
    }
    div:nth-child(2) {
        line-height: 55px;
        text-align: center;
    }

    div:nth-child(3) {
        line-height: 55px;
        text-align: right;
        padding-right: 15px;
    }

}

.admin-menu {
    // background-color: #191a23;
    background-color: #191a23;
    height: calc(100vh - 55px);
    width: 270px;
    .logo {
        height: 50px;
        align-items: center;
        justify-content: center;
        display: flex;
        background-color: #191a23;
        color: var(--ea-aside-text-color);
    }
    .el-menu {
        border-right: 0px;
    }
}

.el-main {
    padding: 0;

    .admin-main {
        padding: 0;
        height: calc(100vh - 55px);
    }
}

</style>